<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
    <h3 class="modal-title">{{'CHANGE_PWD.TITLE' | translate}}</h3>
    <inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></inline-alert>
    <div class="modal-body body-format">
        <form #changepwdForm="ngForm" class="form">
            <section class="form-block">
                <div class="form-group form-group-override">
                    <label for="oldPassword" class="required form-group-label-override">{{'CHANGE_PWD.CURRENT_PWD' | translate}}</label>
                    <label for="oldPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]="oldPassInput.invalid && (oldPassInput.dirty || oldPassInput.touched)">
                <input type="password" id="oldPassword"
                    required
                    name="oldPassword"
                    [(ngModel)]="oldPwd"
                    #oldPassInput="ngModel" size="30">
                <span class="tooltip-content">
                    {{'TOOLTIP.CURRENT_PWD' | translate}}
                </span>
            </label>
                </div>
                <div class="form-group form-group-override">
                    <label for="newPassword" class="required form-group-label-override">{{'CHANGE_PWD.NEW_PWD' | translate}}</label>
                    <label for="newPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='!getValidationState("newPassword")'>
                <input type="password" id="newPassword"
                    required
                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                    name="newPassword"
                    [(ngModel)]="newPwd"
                    #newPassInput="ngModel" size="30" 
                    (input)='handleValidation("newPassword", false)' 
                    (blur)='handleValidation("newPassword", true)'>
                <span class="tooltip-content">
                    {{'TOOLTIP.PASSWORD' | translate}}
                </span>
            </label>
                    <label class="sub-label-for-input">{{'CHANGE_PWD.PASS_TIPS' | translate}}</label>
                </div>
                <div class="form-group form-group-override">
                    <label for="reNewPassword" class="required form-group-label-override">{{'CHANGE_PWD.CONFIRM_PWD' | translate}}</label>
                    <label for="reNewPassword" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left" [class.invalid]='!getValidationState("reNewPassword")'>
                <input type="password" id="reNewPassword"
                    required
                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,20}$"
                    name="reNewPassword"
                    [(ngModel)]="reNewPwd"
                    #reNewPassInput="ngModel" size="30" 
                    (input)='handleValidation("reNewPassword", false)' 
                    (blur)='handleValidation("reNewPassword", true)'>
                <span class="tooltip-content">
                    {{'TOOLTIP.CONFIRM_PWD' | translate}}
                </span>
            </label>
                </div>
            </section>
        </form>
    </div>
    <div class="modal-footer">
        <span class="spinner spinner-inline loading-top" [hidden]="showProgress === false"></span>
        <button type="button" class="btn btn-outline" (click)="close()">{{'BUTTON.CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary" [disabled]="!isValid || showProgress" (click)="doOk()">{{'BUTTON.OK' | translate}}</button>
    </div>
</clr-modal>